<template>
<div id="pc-public-drawer-back-white">
  <el-drawer :show-close="false" :model-value="isShow" :before-close="handleClose" size="90%">
    <template #default>
      <div class="title">{{ drawerTitle }}</div>
      <el-container class="pc-secondary-drawer-table-container">
        <el-scrollbar class="pc-secondary-drawer-table">
          <!-- <div class="zs-space-bottom-bg zs-pc-public-demo-search-container">
            <span>
              <el-cascader class="zs-select-md zs-space-right-sm" @change="cascaderChange" v-model="queryParams.level"
                :options="cascaderData" :props="cascaderProps" clearable placeholder="一级分类/二级分类/三级分类" filterable />
              <el-input clearable :value="payeeName" class="zs-select-md zs-space-right-sm" placeholder="收款方"
                disabled />
              <el-input clearable v-model="queryParams.costOccupy" class="zs-select-md zs-space-right-sm"
                placeholder="产品名称" />
              <el-button @click="queryList" class="zs-btn-plain">查询</el-button>
            </span>
          </div> -->
          <div class="zs-pc-public-table-main">
            <hsPageTable 
              indexFixed 
              :isHavePage="false" 
              :loading="tableData.loading" 
              :tableData="tableData.data" 
              :cloumns="tableData.columns"
              :cellClassName="tableData.cellClassFn" 
              :headerCellClass="tableData.cellClassFn" 
              :maxHeight="270"
            />
          </div>
        </el-scrollbar>
      </el-container>
    </template>
    <template #footer>
      <el-button class="zs-btn-md zs-btn-plain" @click="handleClose">关闭</el-button>
    </template>
  </el-drawer>
</div>
</template>

<script setup>
// import DocWrapper from "@/components/DocWrapper.vue";
import detailPagesApi from '@/api/Manage/Business/detailPages'
import { formatArea, numToCapital } from '@/utils/publicUtils'
import { reactive, watch } from "vue";
// import { useStore } from "vuex";
// let store = useStore();
// 定义抽屉大小
// const curDrawerSize = ref(store.state.uiDrawerSizeBig);
// 抽屉传值
const props = defineProps({
  // 控制是否打开抽屉
  isShow: { type: Boolean, default: false },
  // 抽屉标题
  drawerTitle: { type: String },
  courseNameType: { type: String },
  projectCode: { type: String },
  courseNumber: { type: String },
  currentYear: { type: String },
  currentMonth: { type: String },
  // 是否禁用
  isReadOnly: { type: Boolean },
  // 当前数据
  currentData: { type: Object }
});
// 监听传值抽屉打开状态
watch(() => props.isShow,
  () => {
    queryList()
});
// 定义更新事件
const emits = defineEmits(["update:isShow"]);
// 关闭抽屉事件
function handleClose() {
  emits("update:isShow", false);
}

// 表格数据
let tableData = reactive({
  loading:false,
  data:[],
  columns:[
    {prop:'courseName',label:'科目',align:'left', fixed:'left', width:120},
  ],
  cellClassFn: setCellCalss
})
// let columnKeys = ['jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dece']
function setColumns() {
  Array(12).fill(0).forEach((el,index)=>{
    // let key = columnKeys[index]
    let key = `month${index+1}`
    let item = {
      prop:key,
      label:`${numToCapital(index + 1)}月`,
      width:130,
      align:'right',
      type:'customMethods',
      methods:(row,empty)=> {
        if (!row[key] && row[key] !== 0) return empty
        if (row.dataType === 'number') {
          let val = row.courseDigit ? row[key] : Math.round(row[key])
          return formatArea(val,row.courseDigit)
        } else {
          return row[key]
        }
      } 
    }
    tableData.columns.push(item)
  })
}
setColumns()

function setCellCalss ({ column }) {
  if (['courseName', 'dece'].includes(column.rawColumnKey)) {
    return 'zs-table-cell-border-right'
  }
}

function queryList() {
  tableData.loading = true
  let { courseNameType, projectCode, courseNumber, currentYear }  = props
  let params = { courseNameType, projectCode, courseNumber, currentYear }
  detailPagesApi.getCostAnalysisListApi(params).then(res=>{
    let resData = res.data
    if(resData.code == 200){
      let resetKeyArr = []
      Array(12).fill(0).forEach((el,index)=>{
        if((index+1) > props.currentMonth) {
          resetKeyArr.push('month'+(index+1))
        }
      })
      tableData.data = resData.data.map(el=>{
        resetKeyArr.forEach(restKey=>{
          el[restKey] = 0
        })
        return el
      })
    }
    tableData.loading = false
  })
}
</script>

<style lang="scss" scoped>
</style>
